<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="baidu-site-verification" content="code-UjJKh3jtOo">
  <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.5.0/styles/atom-one-dark.min.css">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <title>Tit1e</title>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2767111597631391" crossorigin="anonymous"></script>
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Tit1e" type="application/atom+xml">
<script src="/assets/js/DPlayer.min.js"></script></head>

<body class="dark">
    <div class="container">
    <header class="header">
  <div class="title">
      <a href="/" class="logo">Tit1e</a>
      <div class="btn-dark"></div>
      <script>
        let bodyClx = document.body.classList;
        let btnDark = document.querySelector('.btn-dark');
        let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
        let darkVal = localStorage.getItem('dark');

        let setDark = (isDark) => {
        bodyClx[isDark ? 'add' : 'remove']('dark');
        localStorage.setItem('dark', isDark ? 'yes' : 'no');
        };

        setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
        requestAnimationFrame(() => bodyClx.remove('not-ready'));

        btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
        sysDark.addEventListener('change', (event) => setDark(event.matches));
      </script>
  </div>
    <ul class="menu">
        
        
        
        
        <li class="menu-item ">
            <a href="/" class="menu-item-link">Home</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/archives/" class="menu-item-link">Archives</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/atom.xml" class="menu-item-link">RSS</a>
        </li>
        
        
        <li class="menu-item ">
            <a target="_blank" rel="noopener" href="https://pixeltimer.art" class="menu-item-link">Pixel Timer</a>
        </li>
        
    </ul>
    <div class="search-box">
        <input type="search" id="search" placeholder="搜索">
    </div>
</header>
    <article class="post">
  <div class="post-meta">
    <span class="post-time">12 / 23, 2020</span>
  </div>
  <div class="post-title">
    <h1 class="title">用快捷指令快速打开支付码、扫一扫或支付宝指定小程序</h1>
  </div>
  
  <ul class="post-tags">
    
    <li class="tag-item">
      #折腾
    </li>
    
  </ul>
  
  <div class="post-content">
    <p>首先说说使用快捷指令打开支付码、扫一扫等功能的好处，因为在ios14下，支付宝自带的小组件就有这个功能。</p>
<ol>
<li>小组件上的功能是固定的，无法自定义。</li>
<li>小组件样式不一定符合用户审美（至少不符合我的审美，不然我也不会写这篇文章）。</li>
<li>小组件占用屏幕空间大，降低了屏幕的使用效率。</li>
</ol>
<p>这是支付宝小组件的效果：</p>
<p><img src="https://personal-1251959693.cos.ap-chengdu.myqcloud.com/2020-12-23-IMG_7334.jpg?imageMogr2/thumbnail/!40p"></p>
<p>只是使用快捷指令的效果，图上的付款码，扫一扫和叮嗒出行都是支付宝的功能快捷指令化：</p>
<p><img src="https://personal-1251959693.cos.ap-chengdu.myqcloud.com/2020-12-23-IMG_7335.jpg?imageMogr2/thumbnail/!40p"></p>
<p>使用效果如下：</p>
<div id="dplayer1" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer1"),"video":{"url":"https://personal-1251959693.cos.ap-chengdu.myqcloud.com/2020-12-23-140-alipay-shortcuts.mp4","pic":"https://photo-album-1251959693.cos.ap-nanjing.myqcloud.com/video-poster.png"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>

<p>可以看出使用效果上并没有太大的差别，都是点击图标都直接进入扫码界面，没有多余的步骤。</p>
<h2 id="实现过程"><a href="#实现过程" class="headerlink" title="实现过程"></a>实现过程</h2><p>实现这个效果很简单</p>
<ol>
<li>新建一个快捷指令</li>
<li>打开指定 url</li>
<li>保存并添加到桌面</li>
</ol>
<p><img src="https://personal-1251959693.cos.ap-chengdu.myqcloud.com/2020-12-23-IMG_7336.png?imageMogr2/thumbnail/!40p"></p>
<p>如何将快捷指令发送到桌面可以参考<a href="https://evolly.one/2020/12/17/138-ios-desktop/">桌面美化</a>这篇文章。</p>
<p>上面途中展示的扫一扫的链接，我这里还有一些其他的功能链接，有需要自取。</p>
<ul>
<li><p>健康码: alipays:&#x2F;&#x2F;platformapi&#x2F;startapp?appId&#x3D;2021001139676873</p>
</li>
<li><p>微信扫码: weixin:&#x2F;&#x2F;scanqrcode</p>
</li>
<li><p>支付宝扫一扫: alipayqr:&#x2F;&#x2F;platformapi&#x2F;startapp?saId&#x3D;10000007</p>
</li>
<li><p>支付宝付款码: alipayqr:&#x2F;&#x2F;platformapi&#x2F;startapp?saId&#x3D;20000056</p>
</li>
<li><p>支付宝收款码: alipayqr:&#x2F;&#x2F;platformapi&#x2F;startapp?saId&#x3D;20000123</p>
</li>
<li><p>支付宝乘车码: alipayqr:&#x2F;&#x2F;platformapi&#x2F;startapp?saId&#x3D;200011235</p>
</li>
<li><p>支付宝查快递: alipays:&#x2F;&#x2F;platformapi&#x2F;startapp?appId&#x3D;20000754</p>
</li>
<li><p>蚂蚁庄园: alipays:&#x2F;&#x2F;platformapi&#x2F;startapp?appId&#x3D;66666674</p>
</li>
<li><p>蚂蚁森林： alipays:&#x2F;&#x2F;platformapi&#x2F;startapp?appId&#x3D;60000002</p>
</li>
</ul>
<p>上面这些都是现成的，但仔细观察可以发现上面这些链接中，其实不一样的只是地址中的 appId不同，其他都是一样的，所以是不是只要有应用的 appId，就可以通过这种方式实现快速打开应用？</p>
<p>的确可以，比如我自己做了一个叮嗒出行的快捷方式，这是一个支付宝内嵌的小程序，支付宝也支持添加桌面书签，但这种方式会在打开过程中做一次跳转，体验非常差。</p>
<p>下面说一下提取程序中的 appId 的方式：</p>
<ol>
<li><p>在支付宝中打开要添加的程序，点击程序右上角的三个点，在下方弹出功能菜单。</p>
<p><img src="https://personal-1251959693.cos.ap-chengdu.myqcloud.com/2020-12-23-IMG_7340-1.png?imageMogr2/thumbnail/!40p"></p>
</li>
<li><p>点击下方的【添加到桌面】这时小程序会在浏览器打开一个页面，上面会有添加到桌面的教程。</p>
<p><img src="https://personal-1251959693.cos.ap-chengdu.myqcloud.com/2020-12-23-IMG_7341.jpg?imageMogr2/thumbnail/!40p"></p>
</li>
<li><p>复制浏览器地址</p>
</li>
<li><p>从地址中提取 appId</p>
</li>
</ol>
<p>这时我复制出来的地址：</p>
<p><code>https://render.alipay.com/p/s/shortcut/index?appId=2018110161946659&amp;appName=叮嗒出行&amp;appIcon=https://appstoreisvpic.alipayobjects.com/prod/f38acc92-21a5-48be-9a66-8a69474b672a.png@120w.png</code></p>
<p>地址中的 <code>appId=2018110161946659</code> 这串 appId 就是我们要找的。</p>
<p>找到这串 id 后，我们把 id 跟前面的的那串地址拼到一起 <code>alipays://platformapi/startapp?appId=2018110161946659</code>，然后在快捷指令中新建一个指令就完成了。</p>
<p>看一下原来的打开方式跟用快捷指令打开的区别：</p>
<div id="dplayer2" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer2"),"video":{"url":"https://personal-1251959693.cos.ap-chengdu.myqcloud.com/2020-12-23-140-alipay-shortcuts2.mp4","pic":"https://photo-album-1251959693.cos.ap-nanjing.myqcloud.com/video-poster.png"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>

<p>微信如果可以拿到 appId 也可以使用这种方式操作。</p>

  </div>
  <div class="post-near">
    
    <a
      class="post-near-prev"
      href="/p/4f5c4b9e.html"
      title="pm2 基础使用指南"
    >
      <span class="arrow">←</span>
      <span class="post-near-title">
        pm2 基础使用指南
      </span>
    </a>
    
    
    <a
      class="post-near-next"
      href="/p/6a2876c9.html"
      title="js 上传文件至腾讯云对象存储"
    >
      <span class="post-near-title">
        js 上传文件至腾讯云对象存储
      </span>
      <span class="arrow">→</span>
    </a>
    
  </div>
</article>

    <footer class="footer">
  <p>本博客采用 <a class="license-link" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际</a>协议进行许可</p>
  <p>
    <span>Thanks For <a target="_blank" rel="noopener" href="https://github.com/nanxiaobei/hugo-paper" taget="_blank">hugo-paper</a></span>
    <span style="margin-left: 10px;">&copy; 2016-2025 by Tit1e</span>
  </p>
</footer>
    </div>
    <script src="//unpkg.com/@highlightjs/cdn-assets@11.5.0/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
  var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?6349d3bc54baea0b04a65145c5e3b799";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
    })();
    const block = document.querySelectorAll('.post-content')[0]
    block.addEventListener('click', e => {
        const {nodeName, src} = e.target
        if(nodeName !== 'IMG') return
        document.body.classList.add('overflow-hidden')
        const div = document.createElement('div')
        div.id = 'global-cover'
        div.title = '点击关闭'
        const a = document.createElement('a')
        a.href = src
        a.target="_blank"
        a.title = '点击打开原图'
        const img = document.createElement('img')
        img.className = 'show-pic'
        img.src = src
        a.appendChild(img)
        div.appendChild(a)
        document.body.appendChild(div)
    })
    document.body.addEventListener('click', e => {
        if(e.target.id === 'global-cover'){
            document.body.classList.remove('overflow-hidden')
            document.body.removeChild(e.target)
        }
    })
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7M04VN3JZ4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-7M04VN3JZ4');
</script>

<script src="/js/search.js"></script>


</body>
</html>